<template>
    <div>
        <div class="current-match">
            <div class="match-single">
                <div v-for="(item, index) in currentElementList[0].attribute.colorGroup" :key="index" :style="{ backgroundColor: item }" class="singleton"></div>
            </div>
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="内置配色" name="inlay">
                <div class="match-single" v-for="(item, index) in colorList" :key="index" @click="setCurrentColor(item)">
                    <div v-for="(sub, j) in item" :key="j + sub" :style="{ backgroundColor: sub }" class="singleton"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="自定义配色" name="custom">
                <div class="add-match" @click="addCustomMatchEvent"><i class="el-icon-plus"></i></div>
                <div v-show="editMathindex === -1">
                    <div class="edit-color">
                        <div class="single-color" v-for="(item, index) in customMatchColor[0]" :key="index">
                            <el-color-picker size="mini" class="custom-color-picker" v-model="customMatchColor[0][index]"></el-color-picker>
                        </div>
                    </div>
                    <div class="edit-btns">
                        <el-button size="mini" type="text" @click="reverseColor('newCustom')">翻转</el-button>
                        <el-button size="mini" type="text" @click="batchSetColor('newCustom')">渐变</el-button>
                        <el-button size="mini" type="text" @click="editMathindex = null">取消</el-button>
                        <el-button size="mini" type="primary" @click="addCustomColor">添加</el-button>
                    </div>
                </div>

                <div>
                    <div v-for="(item, index0) in customMatch" :key="index0">
                        <div class="edit-content" v-if="editMathindex === index0">
                            <div class="edit-color">
                                <div class="single-color" v-for="(i, index2) in edidMathAttr.attribute[0]" :key="index2">
                                    <el-color-picker size="mini" class="custom-color-picker" v-model="edidMathAttr.attribute[0][index2]"></el-color-picker>
                                </div>
                            </div>
                            <div class="edit-btns">
                                <el-button size="mini" type="text" @click="reverseColor('editCustom')">翻转</el-button>
                                <el-button size="mini" type="text" @click="batchSetColor('editCustom')">渐变</el-button>
                                <el-button size="mini" type="text" @click="editMathindex = null">取消</el-button>
                                <el-button size="mini" type="primary" @click="submitEditMatch(edidMathAttr)">确定</el-button>
                            </div>
                        </div>
                        <div class="match-single" @click="setCurrentColor(item.attribute[0])">
                            <div v-for="(sub, j) in item.attribute[0]" :key="j + sub" :style="{ backgroundColor: sub }" class="singleton"></div>
                            <div class="singleton" @click.stop="editCustomColor(item, index0)">
                                <i class="el-icon-edit"></i>
                            </div>
                            <div class="singleton" @click.stop="deleteCustomColor(item)">
                                <i class="el-icon-delete"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import color from '@/js/main/color.js';
import util from '@/js/util/util.js';
import store from '@/js/store/state.js';
import register from '@/js/main/register.js';
import system from '@/js/main/system.js';
import history from '@/js/main/history.js';
import message from '@/js/util/message.js';

export default {
    data() {
        return {
            activeName: 'inlay',
            color: color,
            colorList: color.colorList,
            editMathindex: '',
            edidMathAttr: {
                attribute: []
            },
            customMatchColor: [],
            customMatch: color.getCustomList(),
            currentElementList: store.getCurrentElementList()
        };
    },
    mounted() {},
    methods: {
        setCurrentColor(item) {
            this.editMathindex = null;
            this.currentElementList[0].attribute.colorGroup = item;
            register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`);
            history.addHistory(store.clone(), 129);
        },
        deleteCustomColor(item) {
            message.confirm(
                '是否要删除该配色方案？',
                '',
                function() {
                    color.deleteCustomColor(item);
                },
                function() {
                    message.message('已取消删除！', 'info');
                }
            );
        },
        editCustomColor(item, index) {
            this.edidMathAttr = JSON.parse(JSON.stringify(item));
            this.editMathindex = index;
        },
        reverseColor(type) {
            switch (type) {
                case 'editCustom':
                    this.edidMathAttr.attribute[0].reverse();
                    break;
                case 'newCustom':
                    this.customMatchColor[0].reverse();
                    break;
                default:
            }
        },
        batchSetColor(type) {
            let color = null;
            if (type == 'newCustom') {
                color = this.customMatchColor[0];
            } else {
                color = this.edidMathAttr.attribute[0];
            }
            let len = color.length;
            let ls = util.getColor(color[0], color[color.length - 1], color.length);
            for (let i = 0; i < len; i++) {
                color.splice(i, 1, ls[i]);
            }
        },
        submitEditMatch(data) {
            this.editMathindex = null;
            color.submitEditColor(data);
        },
        addCustomMatchEvent() {
            this.editMathindex = -1;
            this.customMatchColor = [];
            this.customMatchColor.push(['#FF8800', '#FF8800', '#FF8800', '#FF8800', '#FF8800', '#FF8800']);
        },
        addCustomColor() {
            color.addCustomColor(this.customMatchColor);
            this.editMathindex = null;
            this.customMatchColor = [];
        }
    }
};
</script>

<style lang='scss' scoped>
.current-match {
    margin: 5px 0;
    max-height: $attrMaxHeight;
}
.match-single {
    display: flex;
    justify-content: space-around;
    padding: 3px 0.2rem;
    border: 1px solid #3a445a;
    cursor: pointer;
    margin: 5px 10px;
    .singleton {
        width: 30px;
        height: 15px;
        margin: 0 1px;
        text-align: center;
        color: $FontWhite;
        i {
            display: block;
        }
        &:hover {
            color: #66b1ff;
        }
    }
}
.match-single:hover {
    border: 1px solid #66b1ff;
}
.add-match {
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #ffffff0f;
    border-radius: 2px;
    cursor: pointer;
    color: $FontWhite;
    margin: 10px;
}
.edit-content {
    border: 1px solid #66b1ff;
    padding: 5px 0;
    margin: 10px;
}
.edit-color,
.edit-btns {
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.edit-color {
    border: 1px solid #3a445a;
    padding: 0 3px 5px 2px;
    margin-bottom: 10px;
}
</style>

<style lang='scss'>
.custom-color-picker {
    width: 30px !important;
    height: 15px !important;
    margin: 0 1px !important;
    text-align: center;
    .el-color-picker__trigger {
        border: none !important;
        width: 30px !important;
        height: 15px !important;
    }
    .el-color-picker__color {
        width: 30px !important;
        height: 15px !important;
        border: none !important;
        margin: 0 0 0 -3px;
    }
    .el-color-picker__icon {
        margin: 5px 0 0 0;
    }
}
</style>
